<template>
  <div class="login-layout" :style="loginResult.loginBImg">
    <div class="login-img">
      <img :src="loginResult.loginImg" class="login-img-place">
      <div class="login-wrap">
        <div class="login-wrap-header">{{loginResult.loginTitle}}</div>
        <div class="login-wrap-body">
          <Form ref="loginForm" :model="loginForm" :rules="loginRules">
            <Form-item prop="loginName">
              <Input type="text" v-model="loginForm.loginName" :placeholder="loginResult.userTxt">
              <Icon type="person" slot="prepend"></Icon>
              </Input>
            </Form-item>
            <Form-item prop="password">
              <Input type="password" v-model="loginForm.password" :placeholder="loginResult.passwordTxt"
                     @keyup.enter.native="loginSubmit('loginForm')" @on-change="passwordChange">
              <Icon type="ios-unlocked" slot="prepend"></Icon>
              </Input>
            </Form-item>
            <Form-item>
              <Button type="primary" :disabled="disabled" @click="loginSubmit('loginForm')">
                {{loginResult.userEnter}}
              </Button>
            </Form-item>
          </Form>
        </div>
      </div>
    </div>
    <div class="login-loading" v-show="loading">
      <Spin size="large" fix></Spin>
    </div>
  </div>
</template>
<script>
  import qs from 'qs'
  import { mapState } from 'vuex'

  export default {
    name: 'login',
    data () {
      return {
        loading: false,
        disabled: true,
        loginForm: {
          loginName: '',
          password: ''
        },
        loginRules: {
          loginName: [
            {required: true, message: '请输入用户名'}
          ],
          password: [
            {required: true, message: '请输入密码'}
          ]
        }
      }
    },
    computed: {
      ...mapState('login', ['loginResult'])
    },
    created () {
      this.result()
    },
    methods: {
      result () {
        let loginName = JSON.parse(sessionStorage.getItem('loginName'))
        let router = JSON.parse(sessionStorage.getItem('router'))
        if (loginName && router) {
          this.$router.push('/home')
        }
      },
      loginSubmit (name) {
        let url = this.api.login
        this.loading = true
        let params = {
          loginName: this.loginForm.loginName,
          password: this.loginForm.password
        }
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.post(url, qs.stringify(params)).then((res) => {
              console.log(res.data)
              if (res.data.msg.code === '20000') {
                let data = res.data.data.modules
                let id = res.data.data.Id
                let role = res.data.data.companyId
                sessionStorage.setItem('companyId', JSON.stringify(role))
                // 存储 用户权限信息
                sessionStorage.setItem('loginId', JSON.stringify(id))
                // 存储 用户信息
                sessionStorage.setItem('loginName', JSON.stringify(this.loginForm.loginName))
                // 存储 路由
                sessionStorage.setItem('router', JSON.stringify(data))
                // 添加动态路由
                this.$router.addRoutes(this.shiftyRouter(data))
                this.$router.push('/home')
              } else {
                this.$Message.error({content: res.data.msg.message, duration: 5})
              }
              this.loading = false
            }).catch((err) => {
              if (err) throw err
              this.loading = false
              this.$Message.error({content: '网络异常', duration: 5})
            })
          } else {
            this.$Message.error({content: '请输入用户名', duration: 5})
          }
        })
      },
      passwordChange () {
        // 监听密码变化
        this.$refs.loginForm.validate((valid) => {
          valid ? this.disabled = false : this.disabled = true
        })
      }
    }
  }
</script>
